<script setup lang="ts">
import LineChart from '@/views/home/components/LineChart.vue';
import BarChart from '@/views/home/components/BarChart.vue';
import PieChart from '@/views/home/components/PieChart.vue';
import { SaveOne, User } from '@icon-park/vue-next';
</script>

<template>
	<n-row :gutter="12">
		<n-col :span="12" class="mb-3">
			<n-card>
				<n-statistic label="统计数据" value="99">
					<template #prefix>
						<n-icon>
							<save-one />
						</n-icon>
					</template>
					<template #suffix> / 100</template>
				</n-statistic>
			</n-card>
		</n-col>
		<n-col :span="12" class="mb-3">
			<n-card>
				<n-statistic label="活跃用户">
					<template #prefix>
						<n-icon>
							<user />
						</n-icon>
					</template>
					1,234,123
				</n-statistic>
			</n-card>
		</n-col>
	</n-row>
	<n-grid :cols="4" x-gap="12" y-gap="12" item-responsive responsive="screen">
		<n-grid-item span="4">
			<line-chart />
		</n-grid-item>
		<n-grid-item span="0 s:4 m:2 l:3">
			<bar-chart />
		</n-grid-item>
		<n-grid-item span="0 s:4 m:2 l:1">
			<pie-chart />
		</n-grid-item>
	</n-grid>
</template>

<style scoped></style>
